/* Site Fonts - Local */
/* DM Serif Display - Reg */
@font-face {
    font-family: 'DM Serif Display', serif;
    src: url('Design System/Fonts/DM Serif Display/dmserifdisplay-regular-webfont.woff2') format('woff2');
    font-weight: 400;
}
/* DM Serif Display - Itc */
@font-face {
    font-family: 'DM Serif Display', serif;
    src: url('Design System/Fonts/DM Serif Display/dmserifdisplay-italic-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* DM Sans - Reg */
@font-face {
    font-family: 'DM Sans', sans-serif;
    src: url('Design System/Fonts/DM Sans/DMSans-VariableFont.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-display: swap;
}
/* DM Sans - Itc */
@font-face {
    font-family: 'DM Sans', sans-serif;
    src: url('Design System/Fonts/DM Sans/DMSans-Italic-VariableFont.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-display: swap;
    font-style: italic;
}


/* Site CSS */
html, body {
    margin: 0;
    padding: 0;
  } 


/* Typography */
h1{
    font-family: 'DM Serif Display';
    font-size: 3rem;
}

h2{
    font-family: 'DM Serif Display';
    font-size: 2rem;
}

h3{
    font-family: 'DM Sans';
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5;
}

h4{
    font-family: 'DM Serif Display';
    font-size: 1rem;
    font-size: 1.75rem;
}

h5{
    font-family: 'DM Sans';
    color: #000000;
    font-weight: 400;
    font-size: 1rem;
}

h6{
    font-family: 'DM Sans';
    color: #717171;
    font-weight: 400;
    font-size: 0.85rem;
}

p{
    font-family: 'DM Sans';
    font-weight: 400;
    font-size: 1.125rem;
}

li{
    font-family: 'DM Sans';
    font-weight: 400;
    font-size: 1.125rem;
    margin-left: 24px;
}

.solution-list {
  list-style: none;
  padding: 0;
}

.solution-list li {
  position: relative;
  padding-left: 20px;
}

.solution-list li::before {
  content: "•"; 
  color: #FF8A88; 
  position: absolute;
  left: 0;
}

.do-list {
  list-style: none;
  padding: 0;
}

.do-list li {
  position: relative;
  padding-left: 20px;
  margin-left: 0;
}

.do-list li::before {
  content: "•"; 
  color: #FF8A88; 
  position: absolute;
  left: 0;
}

/* Nav */
.flexdiv{
    width: auto;
    padding: 24px;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    display: flex;
}


#flexdiv_footer{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.tertiary, .tertiary:active, .tertiary:link, .tertiary:visited{
    font-size: 1rem;
    color: #000;
    text-decoration: none;
    font-family: 'DM Sans';
    font-weight: 400;
}

.tertiary:hover{
    font-size: 1rem;
    color: #FF8A88;
    text-decoration: none;
    font-family: 'DM Sans';
    font-weight: 400;
}

.faketertiary{
    font-size: 1rem;
    color: #000;
    text-decoration: none;
    font-family: 'DM Sans';
    font-weight: 400;
}


/* Hero */
.hero{
    display: flex;
    padding: 0px  50px;
    align-items: center;
    gap: 64px;
    flex: 1 0 0;
    justify-content: center;
    margin-top: 32px;
}

.hero-copy{
    max-width: 800px;
h1{
    margin-bottom: 6px;
}
& .highlight{
    color: #FF8A88;
    font-style: italic;
    font-weight: 600;
}
}


.hero-img{
    width: 500px; 
    height: 400px;  
    object-fit: cover; 
    object-position: 30% 90%;
    border-radius: 10px;
}

@media only screen and (max-width: 600px){
    .hero{
        flex-direction: column;
        padding: 0px  30px;
    }
    .hero-img{
        display: none;
    }
}

/* Case Study/Project Cards */





/* Logos */
.logo-container{
    height: 100px;
    display: flex;
    justify-content: center;   
    width: 100%;
    overflow: hidden;
}

.logo-row-container{
    display: flex; 
    gap: 200px; 
    padding-right: 200px;
    align-items: center; 
    animation: moveImages 15s linear infinite;
}


@keyframes moveImages {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

@media only screen and (max-width: 600px){
    .testimonal-container{
        margin-bottom: 250px;
        padding: 30px 30px 30px 30px;
    }
    .logo-container{
        height: 1100px;
    }
}


/* Moving Cricle JS */
.moving-circle {
    position: fixed;
    filter: blur(40px);
    width: 800px;
    height: 800px;
    z-index: -1;
    background-color: #FF8A88; /* Change this to the color of your circle */
    opacity: 30%;
    border-radius: 50%; /* Makes the shape a circle */
    transition: transform 3s ease; /* Smooth transitions */
}

.moving-circle-small {
    position: fixed;
    filter: blur(40px);
    width: 400px;
    height: 400px;
    z-index: -1;
    background-color: #FF8A88; /* Change this to the color of your circle */
    opacity: 20%;
    border-radius: 50%; /* Makes the shape a circle */
    transition: transform 2s ease; /* Smooth transitions */
}

/* About */
.section-banner-bg{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    padding: 72px 24px;
    background-color: rgba(255,138,136,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.section-banner-transparnet{
    width: 100%;
    padding: 96px 24px;
    background-color: transparent;
}

/* Cards */
.card-header{
    font-weight: bold;
}

.card-p-truncated {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3; 
        width: 100%;
    }

.card-button{
    padding: 6px 0px;
    cursor: pointer;
}

.card-button-secondary{
    background-color: #fff; 
    border-color: #000; 
    border-width: 1px;
    cursor: pointer;
}

.card-button:hover{
    background-color: #FF8A88;
}

.card-button-secondary:hover{
    border-color: #FF8A88; 
    background-color: #fff;
    color: #FF8A88;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  max-width: 90%;
  position: relative;
  border-radius: 8px;
  animation-name: animatetop;
  animation-duration: 0.4s;
  height: 700px;
  overflow: scroll;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.no-body-scroll {
  overflow: hidden;
}

@media only screen and (max-width: 600px){
    .modal-content{
        width: 90%;
        max-width: 90%;
    }
}

hr.solid {
  border-top: 1px solid #bbb;
}

/* Optional: Add a simple animation for the modal to fade in */
@keyframes animatetop {
  from { top: -300px; opacity: 0 }
  to { top: 0; opacity: 1 }
}